<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ru" data-theme="light">
<head th:replace="~{fragments/general :: commonHeader(~{::title},~{})}">
    <title>Oiot бот | Авторизация</title>
</head>
<body>
<div th:replace="~{fragments/component :: globalErrorMessage}"></div>
<div class="hero is-fullheight">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered has-text-centered">
                <div class="column is-6 is-offset-3">
                    <h2 class="title">Oiot Бот: панель управления</h2>
                    <hr style="border-bottom:1px solid black"/>
                    <h3 class="subtitle">Авторизация</h3>
                    <div class="columns">
                        <div class="column is-8 is-offset-2">
                            <div class="box">
                                <div class="columns">
                                    <div class="column">
                                        <form id="form-login" name="f" method="post" th:action="@{/perform-login}">
                                            <div class="field">
                                                <div class="control">
                                                    <input class="input" type="text" name="username" required
                                                           maxlength="50" minlength="3" placeholder="Имя пользователя"/>
                                                </div>
                                            </div>
                                            <div id="field-password" class="field is-hidden">
                                                <div class="control">
                                                    <input class="input" type="password" name="password" required
                                                           placeholder="Код авторизации" autocomplete="on"/>
                                                </div>
                                            </div>
                                            <div id="field-code-btn" class="field is-grouped">
                                                <div class="control is-expanded">
                                                    <button id="btn-send-code" type="button"
                                                            class="button is-link is-fullwidth">
                                                        Выслать код
                                                    </button>
                                                </div>
                                                <div class="control is-expanded">
                                                    <button id="btn-enter-code" type="button"
                                                            class="button is-link is-light is-fullwidth">
                                                        Ввести код
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="field">
                                                <div class="control">
                                                    <button id="btn-login" type="button"
                                                            class="button is-link is-fullwidth is-static">
                                                        Вход
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer th:replace="~{fragments/general :: commonFooter(~{::script})}">
    <script th:src="@{/static/js/login.js}"></script>
</footer>
</body>
</html>